<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    chartData: {
      type: Object,
      default: () => ({
        cities: [
          { name: '北京', value: 100, color: '#8A8AFF' },
          { name: '上海', value: 90, color: '#FFFF00' },
          { name: '成都', value: 80, color: '#FFA500' },
          { name: '西安', value: 85, color: '#8A2BE2' },
          { name: '杭州', value: 75, color: '#FF69B4' },
          { name: '南京', value: 70, color: '#00FF7F' },
          { name: '天津', value: 65, color: '#1E90FF' },
          { name: '武汉', value: 60, color: '#FFFFFF' },
          { name: '苏州', value: 55, color: '#FFD700' },
          { name: '青岛', value: 50, color: '#FF6347' }
        ]
      })
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ cities } = this.chartData) {
      // 预定义位置，模拟词云效果
      const positions = [
        [0, 0], [0.5, -0.3], [-0.5, -0.3], [0.3, 0.3], [-0.3, 0.3],
        [0.8, 0], [-0.8, 0], [0, -0.6], [0, 0.6], [0.4, -0.6]
      ]
      
      // 处理数据
      const data = cities.map((city, index) => {
        // 根据值大小确定字体大小
        const fontSize = 14 + (city.value / 10)
        // 使用预定义位置或随机位置
        const position = positions[index % positions.length]
        
        return {
          name: city.name,
          value: [...position, city.value],
          symbolSize: 1, // 散点大小设为最小
          label: {
            show: true,
            formatter: city.name,
            fontSize: fontSize,
            color: city.color || this.getRandomColor(),
            fontWeight: 'bold'
          },
          itemStyle: {
            color: 'transparent' // 散点设为透明
          }
        }
      })

      this.chart.setOption({
        xAxis: {
          type: 'value',
          show: false,
          min: -1,
          max: 1
        },
        yAxis: {
          type: 'value',
          show: false,
          min: -1,
          max: 1
        },
        series: [{
          type: 'scatter',
          data: data,
          animationDelay: function(idx) {
            return idx * 100
          }
        }]
      })
    },
    getRandomColor() {
      // 生成明亮的颜色，适合深色背景
      const colors = [
        '#8A8AFF', // 蓝紫色
        '#FFFF00', // 黄色
        '#FFA500', // 橙色
        '#8A2BE2', // 紫色
        '#FF69B4', // 粉色
        '#00FF7F', // 绿色
        '#1E90FF', // 蓝色
        '#FFFFFF', // 白色
        '#FFD700', // 金色
        '#FF6347'  // 红色
      ]
      return colors[Math.floor(Math.random() * colors.length)]
    }
  }
}
</script>
